<!-- 账号密码登录及微信一键登录 -->
<template>
	<view class="login-box">
		<view class="u-f-ac u-fc login-box">
			<view class="mylogin-img u-f-ac">
				<image src="../../../static/logo.png"></image>
			</view>
			<form @submit="save">
				<view class="setPayPw">
					<view class="u-f-ac set-li">
						<view class="prefix">账号</view>
						<input type="text" placeholder="请输入登录账号" placeholder-style="color:#aaa" name="account"/>
					</view>
					<view class="u-f-ac set-li">
						<view class="prefix">密码</view>
						<input type="password" placeholder="请输入密码" placeholder-style="color:#aaa" name="password">
					</view>
					<view class="u-f-jsb text-size26 bottom-text">
						<view @tap="forgetPw">忘记密码？点击找回您的密码</view>
					</view>
					<button class="loginWeChatBtn" form-type="submit"><text class="icon iconfont iconweixin2 margin-right-sm"></text>登录</button>
					<button class="loginWeChatBtn" open-type="getUserInfo" @getuserinfo="wechatLogin" v-if="show"><text class="icon iconfont iconweixin2 margin-right-sm"></text>微信授权登录</button>
					<button class="loginWeChatBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-else><text class="icon iconfont iconweixin2 margin-right-sm"></text>微信授权手机号码登录</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	
	import valid from '@/common/js/utils/formValidate.js'
	
	export default {
	        data() {
	            return {
	            }
	        },
	        methods: {
	            save: function(e) {
					//定义表单规则
					var rule = [
						{name:"account", checkType : "notnull", checkRule:"",  errorMsg:"账号不能为空"}
					];
	                console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
	                var formdata = e.detail.value
					console.log(e.detail.value)
	               var checkRes = valid.check(formdata, rule);
				   if(checkRes){
					   uni.showToast({title:"验证通过!", icon:"none"});
				   }else{
					   uni.showToast({ title: valid.error, icon: "none" });
				   }
	            }	           
	        }
	    }
</script>

<style scoped lang="scss">
.login-box{
	padding: 0 28rpx;
	height: 100vh;
	box-sizing: border-box;
	background-color: #ffffff;
	image{
		width: 280rpx;
		height: 280rpx;
	}
}
// 
.setPayPw{
	width: 100%;
	margin-top: 60rpx;
}
.mb100 {
	margin-bottom: 100rpx;
}
.set-li{
	padding: 28rpx 0;
	box-sizing: border-box;
}
.set-li,
.set-li input,
.set-li text {
	font-size: 24rpx;
}

.prefix {
	padding-right: 28rpx;
	margin-right: 28rpx;
}
.tui-btn{
	margin-top: 60rpx !important;
}
// 
// 微信登录
.applet-logo {
	padding-bottom: 20rpx;
	margin-bottom: 40rpx;
	border-bottom: 1px solid #eee;
	text-align: center;
}
.applet-text {
	line-height: 50rpx;
	margin-bottom: 300rpx;
	text {
		font-weight: bold;
		font-size: 30rpx;
		margin-right: 20rpx;
	}
}
.applet-text > view:last-child {
	font-size: 24rpx;
	color: #666;
}
.loginWeChatBtn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	font-size: 30rpx;
	background-color: $main-color ;
	border: none;
	color: #fff;
	margin-bottom: 40rpx;
	margin-top: 40rpx;
	border-radius: 60rpx;
}
.mylogin-img{
	margin-top: 60rpx;
	text-align: center;
	
}
.bottom-text{
	padding: 28rpx 0;
	color: $main-color;
}
</style>
